<template>
  <div class="container-pt">
    <van-nav-bar fixed title="修改用户资料" @click-left="$router.back()" left-arrow />
    <van-cell is-link title="头像">
      <van-uploader :after-read="afterRead" v-model="uploader" :preview-image="false">
        <van-image width="30" height="30" round :src="'http://124.223.14.236:8060/'+usermsg.icon
        " />
      </van-uploader>
    </van-cell>
    <van-cell is-link @click="shownick" :value="usermsg.username" title="昵称"></van-cell>
    <van-popup v-model="nick" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar title="编辑昵称" left-text="取消" right-text="完成" left-arrow @click-left="nick=false" @click-right="onClicknick" />
      <van-field v-model="nickname" rows="2" autosize type="textarea" maxlength="50" placeholder="请修改昵称" show-word-limit />
    </van-popup>
    <van-cell is-link @click="showmobile" :value="usermsg.mobile" title="手机号"></van-cell>
    <van-popup v-model="mobile" position="bottom" :style="{ height: '100%' }"><van-nav-bar title="编辑手机号" left-text="取消" right-text="完成" left-arrow @click-left="mobile=false"
        @click-right="onClickmobile" />
      <van-field v-model="mobilenum" rows="2" autosize type="textarea" maxlength="50" placeholder="请修改手机号" show-word-limit /></van-popup>
    <van-cell is-link @click="showsex" :value="usermsg.sex === 1 ? '男' : '女'" title="性别"></van-cell>
    <van-popup v-model="sex" position="bottom" :style="{ height: '70%' }">
      <van-picker title="性别" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="sex=false" ref="getsex"  />
    </van-popup>
    <van-cell is-link :value="usermsg.birthday" title="出生年月" @click="showPopup"></van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @click="show = false" @confirm="handleConfirm" @cancel="show = false" />
    </van-popup>
    <van-cell is-link @click="showadress" :label="usermsg.address" title="家庭住址"></van-cell>
    <van-popup v-model="adress" position="bottom" :style="{ height: '100%' }"><van-nav-bar title="编辑家庭住址" left-text="取消" right-text="完成" left-arrow @click-left="adress=false"
        @click-right="onClickadress" />
      <van-field v-model="newadress" rows="2" autosize type="textarea" maxlength="50" placeholder="请修改家庭住址" show-word-limit /></van-popup>
    <van-cell is-link @click="showwords" :label="usermsg.notes" title="个性留言"></van-cell>
    <van-popup v-model="words" position="bottom" :style="{ height: '100%' }"><van-nav-bar title="编辑个性留言" left-text="取消" right-text="完成" left-arrow @click-left="words=false"
        @click-right="onClickwords" />
      <van-field v-model="newwords" rows="2" autosize type="textarea" maxlength="50" placeholder="请修改个性留言" show-word-limit /></van-popup>
  </div>
</template>
<script>
import { userinfo } from '../../api/userinfo'
import { changeimg, updateall } from '@/api/modify.js'
export default {
  created () {
    this.getuserinfo()
  },
  data () {
    return {
      usermsg: {},
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show: false,
      nick: false,
      mobile: false,
      sex: false,
      adress: false,
      words: false,
      columns: ['男', '女'],
      nickname: '',
      mobilenum: '',
      newadress: '',
      newwords: '',
      uploader: [],
      pic: '',

    }
  },

 

  methods: {
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // 上传后隐藏预览框

      console.log(file);
      const fd = new FormData()
      fd.append('file', file.file)
      const res = await changeimg(fd)
      console.log(this.uploader);
      console.log(res);
      if (res.errno === 0) {
        this.pic = res.data.savePath
        const data = {
          icon: this.pic,
          id: this.usermsg.id
        }
        // console.log(data);
        const result = await updateall(data)
        console.log(result);
        this.$toast.success('修改成功')
        this.getuserinfo()
      }
    },
    showPopup () {
      this.show = true;
      this.currentDate = new Date(this.usermsg.birthday)
    },
    shownick () {
      this.nick = true;
      this.nickname = this.usermsg.username
    },
    showmobile () {
      this.mobile = true;
      this.mobilenum = this.usermsg.mobile
    },
    showsex () {
      this.sex = true;
      // this.$refs.sex.setValues(this.usermsg.sex === 1 ? '男' : '女');
      // console.log(this.gender);
      // this.gender=this.usermsg.sex === 1 ? '男' : '女'
      this.$nextTick( ()=>{
        console.log(this.$refs.getsex);
        this.$refs.getsex.setValues('女')
      }

      )
    },
    showadress () {
      this.adress = true;
      this.newadress = this.usermsg.address
    },
    showwords () {
      this.words = true;
      this.newwords = this.usermsg.notes
    },

    async handleConfirm () {
      console.log(this.currentDate.toLocaleDateString().replace(/\//g, '-'));
      this.show = false

      const data = {
        birthday: this.currentDate.toLocaleDateString().replace(/\//g, '-'),
        id: this.usermsg.id
      }
      console.log(data);
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      }
    },
    async onConfirm () {
      this.sex = false
      // console.log(this.$refs.sex.getColumnValue(0))

      const data = {
        id: this.usermsg.id,
        sex: this.$refs.getsex.getColumnValue(0) === '男' ? 1 : 0
      }
      console.log(data);
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      } else {
        this.$toast.fail(res.errmsg)
      }
    },
    async onClicknick () {
      this.nick = false
      console.log(this.nickname);
      const data = {
        username: this.nickname,
        id: this.usermsg.id
      }
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      } else {
        this.$toast.fail(res.errmsg)
      }
    },
    async onClickmobile () {
      this.mobile = false
      console.log(this.mobilenum);
      const data = {
        mobile: this.mobilenum,
        id: this.usermsg.id
      }
      console.log(this.mobilenum.length);
      if (this.mobilenum.length !== 11 || isNaN(+this.mobilenum)) {
        this.$toast.fail('请输入正确的手机号')
        return
      }
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      } else {
        this.$toast.fail(res.errmsg)
      }
    },
    async onClickadress () {
      this.adress = false
      console.log(this.newadress);
      const data = {
        address: this.newadress,
        id: this.usermsg.id
      }
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      } else {
        this.$toast.fail(res.errmsg)
      }
    },
    async onClickwords () {
      this.words = false
      console.log(this.newwords);
      const data = {
        notes: this.newwords,
        id: this.usermsg.id
      }
      const res = await updateall(data)
      console.log(res);
      if (res.errno === 0) {
        this.$toast.success('修改成功')
        this.getuserinfo()
      } else {
        this.$toast.fail(res.errmsg)
      }
    },
    async getuserinfo () {
      const res = await userinfo()
      console.log(res.data.userInfo);
      if (res.errno === 0) {
        this.usermsg = res.data.userInfo
      } else {
        this.$toast.fail(res.errmsg)
      }
    }

  },


}
</script>

<style>
.van-nav-bar__text {
  color: #fff;
}
</style>